<template>
    <div id="HouseManagement">
        <div class="HouseManagement-top">
            <span>用户ID：</span>
            <el-input v-model="userID" placeholder="请输入用户ID" @input="selectChangedID"></el-input>
            <span>姓名：</span>
            <el-input v-model="username" placeholder="请输入姓名" @input="selectChangedName"></el-input>
            <span>部门：</span>
            <el-input v-model="department" placeholder="请输入部门" @input="selectChangedBumen"></el-input>
            <el-button style="display: none;">搜索</el-button>
            <el-button @click="Reset">重置</el-button>
        </div>
        <div class="HouseManagement-table">
            <el-table
            :data="list1.slice((currentPage-1) * pagesize, currentPage * pagesize)"
            :header-cell-style="{background:'#eef1f6'}"
            style="width:100%">
                <el-table-column
                prop="a"
                label="序号"
                min-width="8%">
                </el-table-column>
                <el-table-column
                prop="b"
                label="用户ID"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="c"
                label="姓名"
                min-width="10%">
                </el-table-column>
                <el-table-column
                prop="d"
                label="联系方式"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="e"
                label="邮箱"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="f"
                label="部门"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="g"
                label="权限"
                min-width="12%">
                </el-table-column>
                <el-table-column
                align="center"
                prop="option"
                label="操作"
                min-width="10%">
                <template slot-scope="scope">
                    <span  @click="Popup('Mybutton1','fade1', scope.row)">
                        <i class="el-icon-view"></i>
                    </span>
                    <span>
                        <i class="el-icon-edit" @click="Popup('Mybutton1','fade1', scope.row)"></i>
                    </span>
                    <span>
                        <i class="el-icon-delete" @click="deleteVal(scope.row.id)"></i>
                    </span> 
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页按钮 -->
            <div class="block paginationBlock">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                :page-sizes="[8, 16, 24, 32]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
        <!--弹出层时的遮罩层-->
        <div id="fade1" class="black_overlay"></div>
        <!-- 弹出的内容 -->
        <div id="Mybutton1" class="white_content popupWidth-PRManage">
            <Popup ref="comp"></Popup>
            <!-- 点击关闭弹出层 -->
            <span style="font-size: 16px;" @click="CloseDiv('Mybutton1','fade1')">X</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/assets/css/popup";
.popupWidth-PRManage{
    width: 70%;
    height: 70%;
    left:15%;
    transform: translateX(-15%);
    top: 50%;
    transform: translateY(-50%);
}
#HouseManagement{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .HouseManagement-top{
        text-align: left;
        margin-bottom: 1%;
        .el-select, .el-input{
            width: 25vh;
            margin-right: 1%;
        }
        .el-button:nth-of-type(1){
            background-color: rgb(51, 61, 73);
            border-color: rgb(51, 61, 73);
            color: #fff;
        }
    }
    .HouseManagement-table{
        flex: 1;
        position: relative;
        .el-table{
            span{
                width: 33%;
                float: left;
            }
            .el-icon-view{
                color: RGB(20,149,231);
            }
        }
    }
    
}
</style>
<script>
import $ from 'jquery'
import Popup from "@/viewsF/jurisdictionManage/user/UserPopup"
export default {
    components:{
        Popup
    },
    data(){
        return{
            userID: '',
            username: '',
            department: '',
            TableData: [
                {
                    id: 1,
                    a: '01',
                    b: '03214568996',
                    c: '王建军',
                    d: '1564798562',
                    e: '123456@qq.com',
                    f: '物业部门',
                    g: '房源信息管理'
                },{
                    id: 2,
                    a: '02',
                    b: '00114568996',
                    c: '李子莹',
                    d: '1564798562',
                    e: '123456@qq.com',
                    f: '财务部门',
                    g: '房源信息管理'
                }
            ],
            list1: [],
            // 当前页数
            currentPage: 1,
            // 总数量 
            total: null,
            // 每页数量 
            pagesize: 8,
        }
    },
    methods:{
        // 删除
        deleteVal(id) {
            this.$confirm('是否确定删除', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                // 确定删除
                this.list1 = this.$deleteById.deleteVal(this.TableData, id)
                this.total = this.list1.length
            }).catch(() => {
                //取消删除         
            });
        },
        // 筛选
        selectChangedID(value) {
            this.list1 = this.$searchVal.searchEvent (this.TableData, value, 'b')
            this.total = this.list1.length
        },
        // 筛选
        selectChangedName(value) {
            this.list1 = this.$searchVal.searchEvent (this.TableData, value, 'c')
            this.total = this.list1.length
        },
        // 筛选
        selectChangedBumen(value) {
            console.log(value)
            this.list1 = this.$searchVal.searchEvent (this.TableData, value, 'f')
            this.total = this.list1.length
        },
        Reset(){
            this.userID = ''
            this.username = ''
            this.department = ''
            this.list1 = this.TableData
            this.total = this.list1.length
        },
        // 分页
        handleSizeChange(val) {
            this.pagesize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        // 弹窗
        ShowDiv(Mybutton,bg_div){
            document.getElementById(Mybutton).style.display='block';
            document.getElementById(bg_div).style.display='block' ;
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            $("#"+bg_div).height($(document).height());
        },
        Popup(Mybutton,bg_div,data){
            $('.popupWidth-PRManage').css({"width":"50%", "height": "70%", "left": "25%", "padding": "0px"})
            this.$refs.comp.getData(data)
            this.ShowDiv(Mybutton,bg_div)
        },
        // 关闭弹窗
        CloseDiv(Mybutton,bg_div){
            document.getElementById(Mybutton).style.display='none';
            document.getElementById(bg_div).style.display='none';
        },
    },
    created(){},
    mounted(){
        $('.el-tabs__content').css("position", "unset")
        this.list1 = this.TableData
        this.total = this.list1.length
    },
}
</script>